<template>
  <div class="largeScreen fcbc">
    <div class="h1 flc fv leftBox">
      <div class="fcbc fv w1">
        <div class="w1">
          <div class="cur" @click="gotoback">
            <el-image style="height: 50px" :src="require(`@/assets/images/windPower/detailBack.png`)"
              fit="fill"></el-image>
          </div>
          <div class="maxTitle pl10 pt20 pb20">{{ farm.name }}</div>
        </div>
        <div class="flex-1 fcbc w1 fv" style="justify-content: space-around">
          <div class="flc w1 ml10">
            <div class="mr20">
              <div class="fenIconBg fcc">{{ farm.zjrl }}</div>
              <div class="cwhite mt20 f14 fcc">总装机容量</div>
            </div>
            <div class="mr20">
              <div class="fenIconBg1 fcc">{{ this.turbineList.length }}</div>
              <div class="cwhite mt20 f14 fcc">风机台数</div>
            </div>
            <div class="mr20">
              <div class="fenIconBg2 fcc">{{ farm.tysj }}</div>
              <div class="cwhite mt20 f14 fcc">投运时间</div>
            </div>
          </div>
          <div class="w1" style="margin-top: 10px;">
            <div class="fenZhibiaoTitle">实时指标</div>
            <div class="flc ml10 mt10">
              <div class="cur2" @click="openTable">
                <!-- 添加动画容器 -->
                <div class="icon-animation-container">
                  <el-image style="height: 90px" :src="require(`@/assets/images/icon/fen-zhibiao.png`)" fit="fill"
                    class="animated-icon">
                  </el-image>
                  <!-- 添加粒子效果 -->
                  <div class="particle p1"></div>
                  <div class="particle p2"></div>
                  <div class="particle p3"></div>
                </div>
              </div>
              <tableListSszn :dialogVisible.sync="dialogVisible" :windFarmId="farm.windFarmId"></tableListSszn>
              <div class="cwhite ml20">
                <div class="f13">有功功率</div>
                <div class="flb mt5">
                  <!--                  <div class="f30 fb">{{ sszb }}</div>-->
                  <!-- <div class="f30 fb">150</div> -->

                  <count-to v-if="showConcentTop2" class="f30 fb" :start-val="0" :end-val="150" :duration="3000"
                    :autoplay="true"></count-to>
                  <div class="f14 mb5">（万KW）</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w1 fcbc fv" style="margin-top: 20px;">
        <div class="fenZhibiaoTitle w1">风机功率排行</div>
        <div class="scroll-table-container">
          <el-table class="flex-1 w1" :data="visibleData" style="width: 100%; max-height: 100%"
            :row-class-name="tableRowClassName">
            <el-table-column prop="ranking" align="center" label="排名" width="80">
              <template slot-scope="scope">
                <el-image v-if="scope.row.ranking <= 3" style="width: 23px; height: 18px"
                  :src="require(`@/assets/images/icon/top-${scope.row.ranking}.png`)" fit="fill"></el-image>
                <div class="fcc" v-else>{{ scope.row.ranking }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="风机名称" align="center"></el-table-column>
            <el-table-column prop="power" label="功率" width="50" align="center"></el-table-column>
            <el-table-column prop="time" label="时间" width="120" align="center"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <div class="rel flc fw fjAllBox" style="margin-left: 5%;">
      <div class="fjBox" v-for="(item, idx) in turbineList" :key="idx" @click="goToDetail(item)"
        :style="`transform: scale(${sizeFun(idx, 's')});top:${sizeFun(idx, 't')}px;left:${sizeFun(idx, 'l')}px;`">
        <!--        <div class="fcTitle">#22风机</div>-->
        <div class="fcTitle">{{ item.turbineCode }}</div>
        <div class="fcObj">
          <div class="fcHeader fcc">
            <el-image style="height: 80px" :src="require(`@/assets/images/icon/fcHeader.png`)" fit="fill"></el-image>
          </div>
          <div class="fcCar fcc">
            <el-image style="height: 120px" :src="require(`@/assets/images/icon/fcCar.png`)" fit="fill"></el-image>
          </div>
        </div>
      </div>
    </div>

    <div class="rightBox h1 fcbc fv">
      <div class="w1">
        <div class="frc">
          <div class="cblue">{{ currentDate }}</div>
          <div class="cwhite ml10">{{ currentTime }}</div>
        </div>
        <div class="mt10">
          <div class="fenZhibiaoTitle">环境参数</div>
          <div class="flc pl30 pr30">
            <div class="flex-1">
              <div class="detail-hj detail-hj1 fcc cwhite">{{ hjcs.fx }}</div>
              <div class="detail-text-hj detail-text-hj1 fcc">风向</div>
            </div>
            <div class="flex-1">
              <div class="detail-hj detail-hj2 fcc cwhite">{{ hjcs.fs }}</div>
              <div class="detail-text-hj detail-text-hj2 fcc">风速</div>
            </div>
            <div class="flex-1">
              <div class="detail-hj detail-hj3 fcc cwhite">{{ hjcs.wd }}</div>
              <div class="detail-text-hj detail-text-hj3 fcc">温度</div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-1 w1 flc fv fcbc fv mt20">
        <div class="flex-1 w1 flc fv">
          <div class="fenZhibiaoTitle w1">发电统计</div>
          <div class="flc pl30 pr30 w1">
            <div class="flex-1 flc">
              <div class="icon-all-4"></div>
              <div class="ml10 cwhite">
                <div class="flb">
                  <!--                  <div class="f20">{{ fdtj.ri }}</div>-->
                  <!-- <div class="f20">5600</div> -->

                  <count-to v-if="showConcentTop3" class="cwhite f20" :start-val="0" :end-val="5600" :duration="3000"
                    :autoplay="true"></count-to>
                  <div class="mb5">kwh</div>
                </div>
                <div class="mt5">日发电量</div>
              </div>
            </div>
            <div class="flex-1 flc">
              <div class="icon-all-4"></div>
              <div class="ml10 cwhite">
                <div class="flb">
                  <!--                  <div class="f20">{{ fdtj.zong }}</div>-->
                  <!-- <div class="f20">2852000</div> -->

                  <count-to v-if="showConcentTop4" class="cwhite f20" :start-val="0" :end-val="2852000" :duration="3000"
                    :autoplay="true"></count-to>
                  <div class="mb5">kwh</div>
                </div>
                <div class="mt5">总发电量</div>
              </div>
            </div>
          </div>
          <div class="mt20 flex-1 w1">
            <lineChartDc :xAxisData="fdtjx" :seriesData="fdtjy" :className="'chart'" :height="'100%'" :width="'100%'"
              :unit="'kwh'" :dataName="'时间'"></lineChartDc>
          </div>
        </div>
        <div class="flex-1 w1 fcbc fv">
          <div class="fenZhibiaoTitle w1">机组状态</div>
          <div class="mt10 pl30 pr40 flex-1 w1 fcbc fv">
            <div class="flex-1 flc w1">
              <div class="icon-rt-bg flex-1 mr10 fcac">
                <div>
                  <el-image class="iconWH" :src="require(`@/assets/images/icon/icon-rt-1.png`)" fit="fill"></el-image>
                </div>
                <div>
                  <div class="cgray fcc f12 mb10">运行中</div>
                  <div class="cwhite f20 fcc">{{ jzzt.yxz }}</div>
                </div>
              </div>
              <div class="icon-rt-bg flex-1 fcac">
                <div>
                  <el-image class="iconWH" :src="require(`@/assets/images/icon/icon-rt-2.png`)" fit="fill"></el-image>
                </div>
                <div>
                  <div class="cgray fcc f12 mb10">离线</div>
                  <div class="cwhite f20 fcc">{{ jzzt.lx }}</div>
                </div>
              </div>
            </div>
            <div class="flex-1 flc mt10 w1">
              <div class="icon-rt-bg flex-1 mr10 fcac">
                <div>
                  <el-image class="iconWH" :src="require(`@/assets/images/icon/icon-rt-3.png`)" fit="fill"></el-image>
                </div>
                <div>
                  <div class="cgray fcc f12 mb10">检修</div>
                  <div class="cwhite f20 fcc">{{ jzzt.jx }}</div>
                </div>
              </div>
              <div class="icon-rt-bg flex-1 fcac">
                <div>
                  <el-image class="iconWH" :src="require(`@/assets/images/icon/icon-rt-4.png`)" fit="fill"></el-image>
                </div>
                <div>
                  <div class="cgray fcc f12 mb10">故障</div>
                  <div class="cwhite f20 fcc">{{ jzzt.gz }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import lineChartDc from "./chart/lineChartDc.vue";
import tableListSszn from "./tableList-sszn.vue";
import { queryDashboardData, findValidRankListByWindFarmId, selectValidTopToday } from "@/api/dp/dianchangDetail"
import { getFarm } from "@/api/system/farm"
import { listTurbine } from "@/api/system/turbine"
import CountTo from 'vue-count-to';
import { devicesWarningData, powerGenerationTrendList } from "@/api/dp/cockpit";

export default {
  name: "dianchangDetail",
  components: { lineChartDc, tableListSszn, CountTo },
  data() {
    return {
      showConcentTop2: true,
      showConcentTop3: true,
      showConcentTop4: true,
      farm: {},
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        location: null
      },
      //风机数据列表
      turbineList: [],
      // 发电统计x
      fdtjx: [],
      // 发电统计y
      fdtjy: [],
      currentDate: "",
      currentTime: "",
      // 环境参数
      hjcs: {
        fx: '西北',
        fs: '5',
        wd: '27',
      },
      // 机组状态
      jzzt: {
        yxz: '-',
        lx: '-',
        jx: '-',
        gz: '-',
      },
      // 发电统计
      fdtj: {
        ri: '-',
        zong: '-',
      },
      // 实时指标
      sszb: "--",
      dialogVisible: false,
      tableData: [],
      visibleData: [], // 当前显示的数据
      visibleCount: 10, // 默认显示10条
      currentIndex: 0, // 当前显示的开始索引
      scrollInterval: null // 滚动定时器
    };
  },
  methods: {
    // 下面接口都需要穿上个页面点进来的id,由于地图页面找的前端没开发完这里先用死的
    /** 查询风力发电机详细信息列表 */
    /** 查询风场详细信息 */
    getFarm() {
      this.loading = true
      // 获取风场详情
      getFarm(this.farm.windFarmId).then(response => {
        this.farm = response.data
        this.queryParams.location = response.data.windFarmId;
        this.loading = false
      })
    },
    /** 查询风力发电机详细信息列表 */
    getList() {
      this.loading = true
      listTurbine(this.queryParams).then(response => {
        this.turbineList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 运行数据
    dpsj() {
      devicesWarningData().then(response => {
        this.jzzt = response.data
      })
      queryDashboardData(this.farm.windFarmId).then(response => {
        if (response.data.power_statistics != null) {
          this.fdtj = response.data.power_statistics
        }
        // if(response.data.environment_params != null){
        //   this.hjcs = response.data.environment_params
        // }
        // 发电统计x
        this.fdtjx = response.data.power_chart_data.xaxis
        // 发电统计y
        this.fdtjy = response.data.power_chart_data.yaxis
      })
    },
    // 查询当天 最新的一条有效功率
    glsj() {
      selectValidTopToday(this.farm.windFarmId, "farm").then(response => {
        if (response.data) {
          this.sszb = response.data.value;
        } else {
          this.sszb = "--";
        }
      })
    },
    // 查询实时风机排行
    fjsj() {
      findValidRankListByWindFarmId(this.farm.windFarmId).then(response => {
        this.tableData = response.data;
        // 初始化显示前10条
        this.visibleData = this.tableData.slice(0, this.visibleCount);
        // 开始滚动
        this.startScroll();
      });
    },
    // 开始滚动
    startScroll() {
      // 每5秒滚动一次
      this.scrollInterval = setInterval(() => {
        this.scrollUp();
      }, 2000);
    },
    // 停止滚动
    stopScroll() {
      if (this.scrollInterval) {
        clearInterval(this.scrollInterval);
        this.scrollInterval = null;
      }
    },
    // 向上滚动
    scrollUp() {
      if (this.tableData.length <= this.visibleCount) return;

      // 计算下一个索引位置
      this.currentIndex = (this.currentIndex + 1) % this.tableData.length;

      // 添加动画效果
      this.addScrollAnimation();

      // 更新显示的数据
      setTimeout(() => {
        const endIndex = this.currentIndex + this.visibleCount;
        this.visibleData = this.tableData.slice(
          this.currentIndex,
          endIndex > this.tableData.length ?
            this.tableData.length :
            endIndex
        );

        // 如果到达末尾，补充开头的数据
        if (endIndex > this.tableData.length) {
          this.visibleData = this.visibleData.concat(
            this.tableData.slice(0, endIndex - this.tableData.length)
          );
        }
      }, 300);
    },
    // 添加滚动动画
    addScrollAnimation() {
      const tableBody = document.querySelector('.scroll-table-container .el-table__body-wrapper');
      if (tableBody) {
        tableBody.style.transition = 'transform 0.3s ease-out';
        tableBody.style.transform = 'translateY(-30px)';

        // 动画结束后重置
        setTimeout(() => {
          tableBody.style.transition = 'none';
          tableBody.style.transform = 'translateY(0)';
        }, 300);
      }
    },
    // 年月日时分秒
    updateDateTime() {
      const now = new Date();
      // 格式化日期（YYYY-MM-DD 星期X）
      const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const weekday = weekdays[now.getDay()];
      this.currentDate = `${year}-${month}-${day} ${weekday}`;

      // 格式化时间（HH:MM:SS）
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      this.currentTime = `${hours}:${minutes}:${seconds}`;
    },
    openTable() {
      this.dialogVisible = true;
    },
    sizeFun(idx, t) {
      let idx1 = idx;
      if (idx1 == 0) {
        if (t == "s") {
          return 1 / (idx1 + 1);
        }
        if (t == "t") {
          return 300 - (idx1 + 1) * 70;
        }
        if (t == "l") {
          return 180 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 1) {
        if (t == "s") {
          return 1.75 / (idx1 + 1);
        }
        if (t == "t") {
          return 270 - (idx1 + 1) * 70;
        }
        if (t == "l") {
          return 150 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 2) {
        if (t == "s") {
          return 2.05 / (idx1 + 1);
        }
        if (t == "t") {
          return 250 - (idx1 + 1) * 70;
        }
        if (t == "l") {
          return 150 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 3) {
        if (t == "s") {
          return 2.45 / (idx1 + 1);
        }
        if (t == "t") {
          return 250 - (idx1 + 1) * 70;
        }
        if (t == "l") {
          return 150 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 4) {
        if (t == "s") {
          return 2.8 / (idx1 + 1);
        }
        if (t == "t") {
          return 255 - (idx1 + 1) * 70;
        }
        if (t == "l") {
          return 150 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 5) {
        if (t == "s") {
          return 6.1 / (idx1 + 1);
        }
        if (t == "t") {
          return 290 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 650 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 6) {
        if (t == "s") {
          return 6.05 / (idx1 + 1);
        }
        if (t == "t") {
          return 200 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 630 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 7) {
        if (t == "s") {
          return 5.85 / (idx1 + 1);
        }
        if (t == "t") {
          return 125 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 630 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 8) {
        if (t == "s") {
          return 5.5 / (idx1 + 1);
        }
        if (t == "t") {
          return 60 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 630 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 9) {
        if (t == "s") {
          return 5.2 / (idx1 + 1);
        }
        if (t == "t") {
          return 5 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 630 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 10) {
        if (t == "s") {
          return 11.6 / (idx1 + 1);
        }
        if (t == "t") {
          return 340 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 1120 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 11) {
        if (t == "s") {
          return 10.1 / (idx1 + 1);
        }
        if (t == "t") {
          return 250 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 1090 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 12) {
        if (t == "s") {
          return 9.2 / (idx1 + 1);
        }
        if (t == "t") {
          return 175 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 1090 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 13) {
        if (t == "s") {
          return 8.5 / (idx1 + 1);
        }
        if (t == "t") {
          return 110 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 1090 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 14) {
        if (t == "s") {
          return 7.6 / (idx1 + 1);
        }
        if (t == "t") {
          return 55 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 1090 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 15) {
        if (t == "s") {
          return 16.2 / (idx1 + 1);
        }
        if (t == "t") {
          return 390 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 1590 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 16) {
        if (t == "s") {
          return 14.3 / (idx1 + 1);
        }
        if (t == "t") {
          return 300 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 1570 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 17) {
        if (t == "s") {
          return 13 / (idx1 + 1);
        }
        if (t == "t") {
          return 228 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 1570 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 18) {
        if (t == "s") {
          return 12 / (idx1 + 1);
        }
        if (t == "t") {
          return 165 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 1570 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 19) {
        if (t == "s") {
          return 10 / (idx1 + 1);
        }
        if (t == "t") {
          return 115 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 1570 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 20) {
        if (t == "s") {
          return 21 / (idx1 + 1);
        }
        if (t == "t") {
          return 440 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 2050 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 21) {
        if (t == "s") {
          return 18.5 / (idx1 + 1);
        }
        if (t == "t") {
          return 350 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 2030 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 22) {
        if (t == "s") {
          return 16.3 / (idx1 + 1);
        }
        if (t == "t") {
          return 278 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 2030 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 23) {
        if (t == "s") {
          return 14.6 / (idx1 + 1);
        }
        if (t == "t") {
          return 215 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 2030 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 24) {
        if (t == "s") {
          return 12 / (idx1 + 1);
        }
        if (t == "t") {
          return 160 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 2030 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 25) {
        if (t == "s") {
          return 26 / (idx1 + 1);
        }
        if (t == "t") {
          return 610 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 1930 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 26) {
        if (t == "s") {
          return 26.5 / (idx1 + 1);
        }
        if (t == "t") {
          return 610 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 2165 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 27) {
        if (t == "s") {
          return 26 / (idx1 + 1);
        }
        if (t == "t") {
          return 640 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 2390 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 28) {
        if (t == "s") {
          return 15.5 / (idx1 + 1);
        }
        if (t == "t") {
          return 195 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 2400 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 29) {
        if (t == "s") {
          return 17 / (idx1 + 1);
        }
        if (t == "t") {
          return 205 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 2610 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 30) {
        if (t == "s") {
          return 19 / (idx1 + 1);
        }
        if (t == "t") {
          return 265 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 2610 - (idx1 + 1) * 60;
        }
      }
      if (idx1 == 31) {
        if (t == "s") {
          return 30 / (idx1 + 1);
        }
        if (t == "t") {
          return 625 - (idx1 + 1) * 10;
        }
        if (t == "l") {
          return 1900 - (idx1 + 1) * 60;
        }
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "odd";
      }
      return "";
    },
    // 返回
    gotoback() {
      this.$router.go(-1);
    },
    // 进入风机详情
    goToDetail(row) {
      this.$router.push({
        path: "/fengJiDetail",
        query: {
          windTurbineId: row.id,       // 第一个参数
          windTurbinename: row.turbineCode    // 第二个参数
        }
      });
    },
    // 定时器15分钟加载一次
    // 增强版数据刷新方法
    async refreshData() {
      try {
        await Promise.all([
          // 初始化加载
          this.getFarm(),
          // 获取风机列表
          this.getList(),
          this.dpsj(),
          // 查询当天 最新的一条有效功率
          this.glsj(),
          this.glsj(),
          this.fjsj(),
          this.showConcentTop2 = false,
          this.showConcentTop3 = false,
          this.showConcentTop4 = false,
          this.$nextTick(() => {
            this.showConcentTop2 = true,
              this.showConcentTop3 = true,
              this.showConcentTop4 = true
          })
        ]);
        console.log('数据刷新成功', new Date().toLocaleString());
      } catch (error) {
        console.error('数据刷新失败:', error);
      }
    },

    // 初始化定时器
    initRefreshTimer() {
      // 先清除旧定时器
      if (this.refreshInterval) {
        clearInterval(this.refreshInterval);
      }
      // 设置定时器 (1分钟)
      this.refreshInterval = setInterval(() => {
        this.refreshData();
      }, 60000);
    }
  },
  mounted() {
    // 初始化定时刷新
    this.initRefreshTimer();

    // 获取传入 风场信息
    let windFarmId = this.$route.query.windFarmId;
    this.farm = {
      windFarmId: windFarmId
    }
    // 初始化加载
    this.getFarm()
    // 获取风机列表
    this.getList()
    this.dpsj()
    // 查询当天 最新的一条有效功率
    this.glsj()
    this.glsj()
    this.fjsj()
    // 初始更新
    // this.updateDateTime();
    // 每秒更新一次
    this.timer = setInterval(this.updateDateTime, 1000);
  },
  beforeDestroy() {
    // 清除定时器，防止内存泄漏
    clearInterval(this.timer);
    this.stopScroll();
  },
};
</script>

<style scoped lang="scss">
/* 在原有样式基础上添加 */

.cur2 {
  cursor: pointer;
  position: relative;
  display: inline-block;
  perspective: 1000px;
}

.icon-animation-container {
  position: relative;
  display: inline-block;
  transform-style: preserve-3d;
}

.animated-icon {
  position: relative;
  z-index: 10;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: drop-shadow(0 0 5px rgba(0, 170, 255, 0.5));

  animation: floatIcon 3s ease-in-out infinite,
    rotateIcon 15s linear infinite,
    pulseIcon 5s ease-in-out infinite;
}

/* 粒子效果 */
.particle {
  position: absolute;
  z-index: 5;
  border-radius: 50%;
  opacity: 0;
}

.p1 {
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(82, 181, 230, 0.9), rgba(0, 170, 255, 0));
  animation: particleMove 3s ease-in-out infinite;
}

.p2 {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(10, 167, 255, 0.9), rgba(0, 170, 255, 0));
  animation: particleMove 3.5s ease-in-out infinite 0.5s;
  top: 40%;
  left: 30%;
}

.p3 {
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(0, 255, 255, 0.9), rgba(0, 170, 255, 0));
  animation: particleMove 4s ease-in-out infinite 1s;
  top: 20%;
  left: 50%;
}

/* 定义动画 */
@keyframes floatIcon {

  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 5px rgba(0, 170, 255, 0.5));
  }

  50% {
    transform: translateY(-10px) scale(1.1);
    filter: drop-shadow(0 0 15px rgba(0, 170, 255, 0.8));
  }
}

@keyframes rotateIcon {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(360deg);
  }
}

@keyframes pulseIcon {

  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
  }
}

@keyframes particleMove {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translate(40px, -40px) scale(1.5);
    opacity: 0;
  }
}

/* 添加悬停效果 */
.cur:hover .animated-icon {
  transform: scale(1.2) rotateY(10deg);
  filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.8));
  animation-play-state: paused;
}

.cur:hover .particle {
  animation-play-state: paused;
}



/* 表格容器样式 */
.scroll-table-container {
  height: 400px;
  /* 根据实际需要调整高度 */
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* 隐藏滚动条 */
.scroll-table-container>>>.el-table__body-wrapper {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow: hidden !important;
}

.scroll-table-container>>>.el-table__body-wrapper::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}

/* 表格行动画效果 */
.scroll-table-container>>>.el-table__row {
  transition: all 0.3s ease;
}

/* 奇数行样式 */
.scroll-table-container>>>.el-table .odd {
  background-color: rgba(21, 56, 100, 0.6) !important;
}


.largeScreen {
  width: 100%;
  height: 100%;
  background: url("~@/assets/images/windPower/detail-fenchBg.png") #000f21;
  background-size: 100% 100%;
  position: relative;
  padding: 15px;
}

.cwhite {
  color: #ffffff;
}

.cblue {
  color: #45a2ff;
}

.cgray {
  color: #999999;
}

.fb {
  font-weight: bold;
}

.maxTitle {
  font-size: 30px;
  color: #ffffff;
  font-weight: bold;
}

.fenIconBg {
  background: url("~@/assets/images/icon/fen1.png");
  background-size: 100% 100%;
  width: 70px;
  height: 70px;
  color: #ffffff;
  font-size: 11px;
  padding-top: 16px;
  font-weight: bold;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1;
  filter: drop-shadow(0 0 5px rgba(0, 170, 255, 0.3));
}
.fenIconBg1 {
  background: url("~@/assets/images/icon/fen9.png");
  background-size: 100% 100%;
  width: 70px;
  height: 70px;
  color: #ffffff;
  font-size: 11px;
  padding-top: 16px;
  font-weight: bold;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1;
  filter: drop-shadow(0 0 5px rgba(0, 170, 255, 0.3));
}
.fenIconBg2 {
  background: url("~@/assets/images/icon/fen0.png");
  background-size: 100% 100%;
  width: 70px;
  height: 70px;
  color: #ffffff;
  font-size: 11px;
  padding-top: 16px;
  font-weight: bold;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1;
  filter: drop-shadow(0 0 5px rgba(0, 170, 255, 0.3));
}

/* 光晕背景 */
.fenIconBg::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: radial-gradient(circle, rgba(0, 170, 255, 0.6) 0%, rgba(0, 170, 255, 0) 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.6s ease;
  z-index: -1;
  animation: pulse 3s infinite ease-in-out;
}

/* 粒子效果 */
.fenIconBg::after {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background:
    radial-gradient(circle at 20% 20%, rgba(82, 181, 230, 0.8) 0%, transparent 10%),
    radial-gradient(circle at 80% 30%, rgba(82, 181, 230, 0.8) 0%, transparent 10%),
    radial-gradient(circle at 40% 70%, rgba(0, 170, 255, 0.7) 0%, transparent 10%),
    radial-gradient(circle at 60% 80%, rgba(0, 170, 255, 0.5) 0%, transparent 60%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1.4s ease;
  z-index: -2;
  transform: rotate(0deg);
  animation: particle-rotate 15s linear infinite;
}


/* 光晕背景 */
.fenIconBg1::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: radial-gradient(circle, rgba(0, 170, 255, 0.6) 0%, rgba(0, 170, 255, 0) 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.6s ease;
  z-index: -1;
  animation: pulse 3s infinite ease-in-out;
}

/* 粒子效果 */
.fenIconBg1::after {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background:
    radial-gradient(circle at 20% 20%, rgba(82, 181, 230, 0.8) 0%, transparent 10%),
    radial-gradient(circle at 80% 30%, rgba(82, 181, 230, 0.8) 0%, transparent 10%),
    radial-gradient(circle at 40% 70%, rgba(0, 170, 255, 0.7) 0%, transparent 10%),
    radial-gradient(circle at 60% 80%, rgba(0, 170, 255, 0.5) 0%, transparent 60%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1.4s ease;
  z-index: -2;
  transform: rotate(0deg);
  animation: particle-rotate 15s linear infinite;
}

/* 光晕背景 */
.fenIconBg2::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: radial-gradient(circle, rgba(0, 170, 255, 0.6) 0%, rgba(0, 170, 255, 0) 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.6s ease;
  z-index: -1;
  animation: pulse 3s infinite ease-in-out;
}

/* 粒子效果 */
.fenIconBg2::after {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background:
    radial-gradient(circle at 20% 20%, rgba(82, 181, 230, 0.8) 0%, transparent 10%),
    radial-gradient(circle at 80% 30%, rgba(82, 181, 230, 0.8) 0%, transparent 10%),
    radial-gradient(circle at 40% 70%, rgba(0, 170, 255, 0.7) 0%, transparent 10%),
    radial-gradient(circle at 60% 80%, rgba(0, 170, 255, 0.5) 0%, transparent 60%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1.4s ease;
  z-index: -2;
  transform: rotate(0deg);
  animation: particle-rotate 15s linear infinite;
}


/* 动画定义 */
@keyframes pulse {

  0%,
  100% {
    transform: scale(0.4);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
}

@keyframes particle-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}









.fenZhibiaoTitle {
  background: url("~@/assets/images/icon/fen-titleBg.png");
  background-size: 100% 100%;
  height: 60px;
  color: #ffffff;
  padding-left: 60px;
  padding-top: 20px;
  font-weight: bold;
  position: relative;
  /* 添加相对定位 */
  overflow: hidden;
  /* 隐藏超出部分 */

  /* 添加光效伪元素 */
  &::before {
    content: "";
    position: absolute;
    top: 29px;
    left: -100%;
    width: 50%;
    height: 10px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0));
    transform: skewX(-25deg);
    /* 倾斜效果 */
    animation: lightSweep 3s ease-in-out infinite;
    z-index: 1;
  }

  /* 添加文字阴影效果 */
  &>div {
    position: relative;
    z-index: 2;
    text-shadow: 0 0 5px rgba(0, 170, 255, 0.7);
    transition: all 0.3s ease;
  }

  /* 悬停效果 */
  &:hover>div {
    text-shadow: 0 0 10px rgba(0, 170, 255, 1);
  }
}

/* 光效动画 */
@keyframes lightSweep {
  0% {
    left: -100%;
    opacity: 0.5;
  }

  70% {
    opacity: 0.8;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

/* 添加背景光晕效果 */
.fenZhibiaoTitle::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: radial-gradient(circle at center,
      rgba(0, 170, 255, 0.2) 0%,
      transparent 70%);
  z-index: 0;
  animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.8;
  }
}

.icon-rt-bg {
  background-image: url("~@/assets/images/icon/icon-rt-bg.png");
  background-size: 100% 100%;
  padding: 15px;
  height: 100%;
}

.iconWH {
  width: 50px;
  height: 50px;
}

.detail-hj1 {
  background: url("~@/assets/images/icon/detail-hj1.png");
}

.detail-hj2 {
  background: url("~@/assets/images/icon/detail-hj2.png");
}

.detail-hj3 {
  background: url("~@/assets/images/icon/detail-hj3.png");
}

.detail-hj {
  background-size: 100% 100%;
  width: 90px;
  height: 90px;
  font-size: 12px;
}

.detail-text-hj1 {
  background: url("~@/assets/images/icon/detail-text-hj1.png");
}

.detail-text-hj2 {
  background: url("~@/assets/images/icon/detail-text-hj2.png");
}

.detail-text-hj3 {
  background: url("~@/assets/images/icon/detail-text-hj3.png");
}

.detail-text-hj {
  background-size: 100% 100%;
  height: 30px;
  padding-bottom: 3px;
  color: #ffffff;
}

.icon-all-4 {
  background: url("~@/assets/images/icon/icon-all-4.png");
  background-size: 100% 100%;
  width: 50px;
  height: 50px;
}

.fcac {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.rel {
  position: relative;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.leftBox {
  width: 400px;
}

.fjAllBox {
  height: 70%;
  width: calc(100% - 840px);
  margin-top: 15%;
  position: relative;
  z-index: 1;
}

.rightBox {
  width: 400px;
  position: relative;
  z-index: 5;
}

.fjBox {
  cursor: pointer;
  position: absolute;
  width: 120px;
  z-index: 1;

  .fcTitle {
    background: url("~@/assets/images/windPower/detail-fenc-title.png");
    background-size: 100% 100%;
    color: #ffffff;
    padding: 15px 5px;
    text-align: center;
  }

  .fcObj {
    .fcHeader {
      position: relative;
      z-index: 2;
      animation: spin 1s linear infinite;
      transform-origin: 60px 30px;
    }

    .fcCar {
      margin-top: -50px;
    }
  }
}

// 表格
::v-deep .el-table__body-wrapper {
  font-size: 12px !important;
}

::v-deep .el-table__body-wrapper table {
  display: block !important;
  height: 385px !important;
  overflow: auto;
}

::v-deep .el-table__body-wrapper tbody {
  height: 100% !important;
}

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}

::v-deep .el-table__empty-block {
  margin-top: -340px;
}

::v-deep .el-table::before {
  height: 0px;
}

::v-deep .el-table th {
  background-color: #153864cc !important;
  border-bottom: none !important;
  color: #36f5f7;
}

::v-deep .el-table tr {
  background-color: transparent !important;
  color: #ffffff;
  height: 36.5px;
}

::v-deep .el-table td {
  padding: 5px 0 !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: normal;
}

::v-deep .el-table__header-wrapper {
  z-index: 999 !important;
  position: relative !important;
  background-color: #133158 !important;
}

::v-deep .el-table__body-wrapper {
  z-index: 99 !important;
  position: relative !important;
}
</style>
